<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ColumNav example: arbitrary HTML</title>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container_core-min.js"></script>
    <script type="text/javascript" src="../js/carousel_min.js"></script>
    <script type="text/javascript" src="../js/columnav_min.js"></script>
    <link href="../css/examples.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
      li.columnav-nonmenu p {
          font-size: 12px;
          margin: 0;
      }
    </style>
    <script type="text/javascript">
      try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
      function init() {
          var cn_cfg = { prevElement: 'columnav-prev', datasource: document.getElementById('arb') };
          var cn = new YAHOO.extension.ColumNav('columnav', cn_cfg);

          var sv1_cfg = { url: location.href, modifier: 'HTML' };
          var sv1 = new YAHOO.extension.SourceViewer('html-source', sv1_cfg);

          var sv2_cfg = { url: 'ajax/xml/arbitrary.xml', modifier: 'XML' };
          var sv2 = new YAHOO.extension.SourceViewer('xml-source', sv2_cfg);

      }
      YAHOO.util.Event.addListener(window, 'load', init);
    </script>
    <script type="text/javascript" src="../js/viewsource.js"></script>
    <link href="../css/stringify.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div id="main">
      <div id="content">
        <p style="float:right"><a href="../">Documentation</a></p>
        <h1>ColumNav</h1>
        <h2>Example</h2>
        <div class="prevButton">
          <a href="javascript:void(0)" id="columnav-prev">&lt; back</a>
        </div>
        <div id="columnav" class="carousel-component">
          <div class="carousel-clip-region">
            <ul class="carousel-list"></ul>
          </div>
        </div>
        <div class="viewsource" id="html-source"></div>
        <div class="viewsource" id="xml-source"></div>
        <p>The ColumNav above is initialized from the list below. This example demonstrates how to load arbitrary HTML into a pane instead of the typical list of menu items. To do this, simply ensure that the content to be loaded does not have <code>&lt;ul&gt;</code> as its root node. Panes loaded in this manner copy their content from their datasource verbatim (as opposed to menus, which undergo some DOM manipulations), and receive a class name of "columnav-nonmenu".</p>
        <ul id="arb">
          <li><a href="http://www.google.com/">Google</a></li>
          <li><a href="ajax/xml/arbitrary.xml" rel="ajax">Some other page</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
